// 放置全局指令
// import Vue from 'vue'
import store from '@/store'

// 1. 熟悉自定义指令的语法

// 2. 编写一个无逻辑但是可以运行的自定义指令

// Vue.directive('checkBtn', {
//   inserted(el, binding) {
//     // el: 指令绑定的那个元素对象 dom
//     // binding.value:  指令等于号后面绑定的表达式的值  v-if="xxx"
//     console.log(el, binding.value)
//     // 拿到el 拿到value 配合权限数据 做按钮显示隐藏控制
//     // 控制逻辑: 判断当前的按钮自身的权限标识能否在后端返回的points中找到 如果找到 证明要显示
//     // 如果找不到 证明要隐藏
//     // 1. 权限数据 -> points  2. binding.value -> 按钮自身的标识
//     const points = store.state.user.userInfo.roles.points
//     if (!points.includes(binding.value)) {
//       // 把当前的按钮移除
//       // 移除eldom 1. remove()  2. 先找到父节点 removeChild
//       el.remove()
//     }
//   }
// })

// 3. 添加按钮的权限控制逻辑

// 4.思考一下如何把当前的写法改造成插件的写法？

// 函数定义法写插件 -> 函数本身会被当成install方法自动执行

const directivePlugin = {
  install(Vue) {
    Vue.directive('checkBtn', {
      inserted(el, binding) {
        // el: 指令绑定的那个元素对象 dom
        // binding.value:  指令等于号后面绑定的表达式的值  v-if="xxx"
        console.log(el, binding.value)
        // 拿到el 拿到value 配合权限数据 做按钮显示隐藏控制
        // 控制逻辑: 判断当前的按钮自身的权限标识能否在后端返回的points中找到 如果找到 证明要显示
        // 如果找不到 证明要隐藏
        // 1. 权限数据 -> points  2. binding.value -> 按钮自身的标识
        const points = store.state.user.userInfo.roles.points
        if (!points.includes(binding.value)) {
          // 把当前的按钮移除
          // 移除eldom 1. remove()  2. 先找到父节点 removeChild
          el.remove()
        }
      }
    })
  }

}

export default directivePlugin
